<template>
  <div class="body">
    <div class="nav"></div>

    <div class="contents">
      <div class="content">
        <div class="responder" v-track.stop="handleCanvasTrack">
          <svg class="canvas" :width="width" :height="height" v-tap.stop="handleCanvasTap">
            <g class="widgets" :transform="`scale(1) translate(${offsetX}, ${offsetY})`">
              <WidgetBuilder
                class="widget"
                v-for="(widgetId) in widgets.allIds"
                :key="widgetId"
                :widgetId="widgetId"
                :params="widgets.byId[widgetId]"
                v-on:tap.stop="handleWidgetTap"
                v-on:track.stop="handleWidgetTrack"
              />
            </g>
          </svg>
          <img
            :src="imageUrl"
            class="background"
            :style="{transform:`scale(1) translate(${offsetX}px, ${offsetY}px)`}"
          />
        </div>
        <div class="layoutGrid"></div>
      </div>
    </div>

    <div class="bottom">
      <ToolButton 
        v-for="toolId in tools.allIds"
        :key="toolId"
        :icon="tools.byId[toolId].icon"
        :text="tools.byId[toolId].text"
        :selected="localSelectedToolId === toolId"
        :data-tool-id="toolId"
        v-on:tap.stop="handleCommonToolItemTap"
      />
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import GesturePlugin from "@/plugins/gestures";

import WidgetBuilder from "@/widgets/WidgetBuilder";
import ToolButton from "@/components/ToolButton";

import { setTransform } from "@/utils/styles";

Vue.use(GesturePlugin);

export default {
  name: "edit",
  components: {
    WidgetBuilder,
    ToolButton
  },
  props: {
    offsetX: {
      type: Number,
      default: 0
    },
    offsetY: {
      type: Number,
      default: 0
    },
    scale: {
      type: Number,
      default: 0
    },
    width: {
      type: Number,
      default: 0
    },
    height: {
      type: Number,
      default: 0
    },
    showGrid: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      localScale: 0,
      localOffsetX: 0,
      localOffsetY: 0,
      imageUrl: require("../assets/location.png"),
      localSelectedToolId: 0 // 选择的工具id
    };
  },
  computed: {
    // computedOffsetX() {
    //   return this.offsetX + this.localOffsetX;
    // },
    // computedOffsetY() {
    //   return this.offsetY + this.localOffsetY;
    // },

    // 获取层级
    computedScale() {
      return this.localScale || this.scale;
    },
    // 获取元素
    widgets() {
      return this.$store.state.widgets;
    },
    tools() {
      return this.$store.state.tools;
    }
  },
  methods: {
    // 地图拖动
    handleCanvasTrack(event) {
      const {
        currentTarget,
        detail: { dx, dy }
      } = event;
      switch (event.detail.state) {
        case "track": {
          setTransform(currentTarget, event.detail.dx, event.detail.dy);
          break;
        }
        case "end": {
          setTransform(currentTarget, 0, 0);
          this.$store.commit("moveCanvas", {
            movementX: dx,
            movementY: dy
          });
          break;
        }
      }
    },
    // 选中元素
    handleWidgetTap(event) {
      const {
        detail: { widgetId }
      } = event;
      this.localSelectedWidgetId = widgetId;
    },
    // 元素拖动
    handleWidgetTrack(event) {
      const {
        currentTarget,
        detail: { dx, dy, state, widgetId }
      } = event;

      switch (state) {
        case "start": {
          this.localSelectedWidgetId = 0;
          break;
        }
        case "track": {
          currentTarget.setAttribute(
            "transform",
            `translate(${dx / this.scale}, ${dy / this.scale})`
          );
          break;
        }
        case "end": {
          currentTarget.removeAttribute("transform");
          this.$store.commit("moveWidget", {
            id: widgetId,
            movementX: dx / this.scale,
            movementY: dy / this.scale
          });
          this.localSelectedWidgetId = widgetId;
          break;
        }
      }
    },
    // 选择控件
    handleCommonToolItemTap(event) {
      window.edt = this;
      const { currentTarget } = event;
      const { dataset: { toolId } } = currentTarget;

      this.localSelectedToolId = parseInt(toolId) || 0;
    },
    // 添加控件
    handleCanvasTap(event) {
      if (this.localSelectedToolId) {
        const { x: clientX, y: clientY } = event.detail;
        const { canvas: canvasInfo } = this.$store.state;
        const [{ x, y }] = document.querySelector('.canvas').getClientRects();
        const layerX = clientX - x;
        const layerY = clientY - y;
        this.$store.commit('createWidgetByToolId', {
          id: this.localSelectedToolId,
          offsetX: (layerX / this.scale - canvasInfo.offsetX),
          offsetY: (layerY / this.scale - canvasInfo.offsetY)
        });
        this.localSelectedToolId = 0;
      }
      this.localSelectedToolId = 0;
    }
  }
};
</script>

<style scoped>
.body {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.nav {
  display: flex;
  align-content: center;
  padding: 0 8px;
  position: relative;
  transition: box-shadow 0.4s;
  box-shadow: rgba(0, 0, 0, 0.12) 0 1px 6px, rgba(0, 0, 0, 0.12) 0 1px 4px;
  height: 50px;
}
.contents {
  display: flex;
  flex: 1 0 auto;
  overflow: hidden;
  background-color: rgb(240, 240, 240);
}
.content {
  flex: 1;
  position: relative;
  pointer-events: none;
  margin: 10px;
  overflow: hidden;
  border-radius: 3px;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.12) 0 1px 6px, rgba(0, 0, 0, 0.12) 0 1px 4px;
}
.responder {
  transform-origin: top left;
  pointer-events: all;
  -webkit-tap-highlight-color: transparent;
}
.canvas {
  z-index: 1;
  display: block;
  position: absolute;
  transform-origin: left top;
  overflow: visible;
  pointer-events: all;
}
.layoutGrid {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(rgba(0, 0, 0, 0.06) 1px, transparent 0),
    linear-gradient(to right, rgba(0, 0, 0, 0.06) 1px, transparent 0),
    linear-gradient(rgba(0, 0, 0, 0.13) 1px, transparent 0),
    linear-gradient(to right, rgba(0, 0, 0, 0.13) 1px, transparent 0);
  background-size: 10px 10px, 10px 10px, 100px 100px, 100px 100px;
  background-position: 0 0;
}
.background {
  position: absolute;
  transform-origin: top left;
  -webkit-tap-highlight-color: transparent;
}
.widgets {
  transform-origin: top left;
}
.widget {
  position: absolute;
  top: 0;
  left: 0;
}
.bottom {
  padding: 0 8px;
  display: flex;
  /* height: 50px; */
  transition: box-shadow 0.4s;
  box-shadow: rgba(0, 0, 0, 0.12) 0 1px 6px, rgba(0, 0, 0, 0.12) 0 1px 4px;
}
</style>